<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1.分析生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h2>当前的n值是：{{n}}</h2>
      <button id="btn" @click="add">点我n+1</button>
      <button @click="die">vm服毒自杀</button>
    </div>

    <script type="text/javascript">
       let vm = new Vue({
        el:'#demo',
        /* template:`
          <div>
            <h2>当前的n值是：{{n}}</h2>
            <button id="btn" @click="add">点我n+1</button>
          </div>
        `, */
        data:{
          n:1
        },
        methods:{
          add(){
            console.log('你点了加那个按钮')
            this.n += 1
          },
          die(){
            console.log('你点了让我自杀的那个按钮')
            this.$destroy()
          }
        },
        watch:{
          n(){
            console.log('n变化了')
          }
        },
        // 数据代理、数据劫持之前调用，且函数中不能获取到data中的数据、methods中的方法，因为数据代理、数据劫持还没开始，传入的各个配置项，还没有开始读取
        // 所有生命周期函数中的this都是vm
        beforeCreate(){
          console.log('beforeCreate')
        },
        // 数据代理、数据劫持完成后调用
        created(){
          console.log('created')
        },
        // 挂载前
        beforeMount(){
          console.log('beforeMount')
        },
        // 挂载完毕
        mounted(){
          console.log('mounted')
        },
        // 页面更新之前
        beforeUpdate(){
          console.log('beforeUpdate')
        },
        // 页面更新完毕
        updated(){
          console.log('updated')
        },
        // vm即将销毁
        beforeDestroy(){
          console.log('beforeDestroy我即将离开了')
          this.add()
        },
        // vm销毁完毕
        destroyed(){
          console.log('destroyed')
        }

      })
    </script>
  </body>
</html>